
<template>
  <van-row>
    <div v-if="type==='picker'">
      <van-field
        v-model="dictName"
        :label="label"
        readonly
        clickable
        name="picker"
        :placeholder="`点击选择${label}`"
        input-align="left"
        :rules="[{ required: required, message: `请选择${label}` }]"
        @click="showPicker = true"
      />
    </div>
    <van-radio-group v-else v-model="dictValue" direction="horizontal" @change="handleChange">
      <van-radio v-for="(dict,index) in dictOptions" :key="index" :name="dict.itemKey">{{ dict.itemName }}</van-radio>
    </van-radio-group>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="dictOptions"
        @confirm="handlePickerConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </van-row>
</template>
<script>
import { selectByDictKey } from '@/api/dict'
export default {
  name: 'DictSelect',
  props: {
    value: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'picker'
    },
    dictKey: {
      type: String,
      default: ''
    },
    disabledValue: {
      type: Array,
      default() {
        return []
      }
    },
    label: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dictValue: '',
      dictName: '',
      dictOptions: [],
      showPicker: false
    }
  },
  watch: {
    dictKey: {
      immediate: true,
      async handler() {
        await this.initDictData(this.dictKey)
      }
    },
    value(v1, v2) {
      if (v1) {
        const result = this.dictOptions.filter(e => String(e.itemKey) === String(v1))
        if (result && result.length > 0) {
          this.dictValue = result[0].itemKey
          this.dictName = result[0].itemName
        } else {
          this.dictValue = ''
          this.dictName = ''
        }
      } else {
        this.dictValue = ''
        this.dictName = ''
      }
    }
  },
  methods: {
    initDictData() { // 获取对应字典数据
      if (this.type === 'button') {
        this.dictOptions.push({ itemKey: '-1', itemName: '全部', active: true })
      }
      const item = sessionStorage.getItem(this.dictKey)
      if (!item || item.length === 0 || item === '[]') {
        let data = []
        selectByDictKey(this.dictKey).then(resp => {
          if (resp.success) {
            data = resp.data
          }
        }).finally(() => {
          sessionStorage.setItem(this.dictKey, JSON.stringify(data))
          const options = JSON.parse(JSON.stringify(data))
          options.forEach(i => {
            if (this.disabledValue.indexOf(i.itemKey) !== -1) {
              i.disabled = true
            }
            this.dictOptions.push(i)
          })
          // this.dictOptions = options
          this.dictValue = this.value ? this.value : ''
        })
      } else {
        const options = JSON.parse(item)
        options.forEach(i => {
          if (this.disabledValue.indexOf(i.itemKey) !== -1) {
            i.disabled = true
          }
          this.dictOptions.push(i)
        })
        // this.dictOptions = options
      }
    },
    handlePickerConfirm(row) {
      this.dictValue = row.itemKey
      this.dictName = row.itemName
      this.$emit('input', row.itemKey)
      this.showPicker = false
    },
    handleChange(e) {
      this.$emit('input', e)
    }
  }
}
</script>

<style scoped>
.loading {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
